<template>
	<view>
		<u-popup :show="showBottom" mode="bottom"  @close="close" @open="open">
			<view class="poput-box">
				<view class="poput-title">
					<view class="poput-title-text">
						故障排查指引
					</view>
					<view>
						<uni-icons class="poput-title-icon" @click="closePopup" type="closeempty" size="20"></uni-icons>
					</view>
				</view>
				<view class="fault-guide">
					<view style="color: gray;">故障排除建议</view>
					<view style="margin: 30rpx 0rpx;">
						{{faultForm.suggestion}}
					</view>
					<view style="color: gray;">可能原因</view>
					<view style="margin: 30rpx 0rpx;">
						{{faultForm.reason}}
					</view>
				</view>
			</view>
			<view class="fault-footer">
				<view  @click="noHelp" :class="{'fault-help':!no,'fault-no':no}" :style="{color:no==true ? 'orange' : 'gray'}">
					<uni-icons v-show="no"  color="orange" type="hand-down-filled" size="20"></uni-icons>
					<uni-icons v-show="!no" color="gainsboro" type="hand-down-filled" size="20"></uni-icons>
					没帮助
				</view>
				<view @click="yesHelp" :class="{'fault-help':!yes,'fault-yes':yes}" :style="{color:yes==true ? 'blue' : 'gray'}">
					<uni-icons v-show="yes" color="blue" type="hand-up-filled" size="20"></uni-icons>
					<uni-icons v-show="!yes" color="gainsboro" type="hand-up-filled" size="20"></uni-icons>
					有帮助
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:['showBottom'],
		data() {
			return {
				faultForm:{
					suggestion:"插座开关已打开了么?请确认电源开关已打开、家中是通电状态，或取消定时设置。若还是不行，请提交服务单进行维修",
					reason:"家中停电、电源开关未打开、保险丝熔断，也可能未到定时开机时间"
				},
				yes:false,
				no:false
			}
		},
		methods: {
			yesHelp(){
				this.yes=!this.yes;
			},
			noHelp(){
				this.no=!this.no;
			},
			change(e) {
				console.log('change', e);
			},
			closePopup(){
				this.$emit('child-event', false);
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>
	.fault-yes{
		padding:15rpx 80rpx;
		border:1rpx solid blue;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		color:blue;
	}
	.fault-no{
		padding:15rpx 80rpx;
		border:1rpx solid orange;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		color:orange;
	}
	.fault-help{
		padding:15rpx 80rpx;
		border:1rpx solid gainsboro;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		color:gray;
	}
	.fault-footer{
		padding: 30rpx 70rpx; 
		display:flex;
		justify-content: space-between;
		border-top: 1rpx gainsboro solid;
	}
	.fault-guide{
		padding: 30rpx;
	}
	.poput-list-left{
		display: flex;
	}
	.poput-list{
		margin: 20rpx 20rpx 0rpx 20rpx;
		height: 20rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.poput-box{
		border-radius: 15rpx 15rpx 0rpx 0rpx;
		height: 800rpx;
		position: relative;
	}
	.poput-title-text{
		text-align: center;
		font-size: 30rpx;
	}
	.poput-title{
		padding: 20rpx;
		border-bottom: 1rpx solid lightgray;
	}
</style>
